<template>
	<view>
		<view class="qigua" @click="startQigua">
			<img class="bagua" src="../../static/image/gua.png" alt="" />
			<view class="start">
				<text>点击起卦</text>
			</view>
		</view>
		<view class="xaingxi" v-if="list!=null">
			<view class="c">
				<view class="t">
					<text class="shu"></text>
					<text class="f">卦象</text>
				</view>
				<view class="m">
					<text>小六壬月课:</text>
					<text>{{list.res.monthclass}}</text>
				</view>
				<view class="m">
					<text>小六壬日课:</text>
					<text>{{list.res.dayclass}}</text>
				</view>
				<view class="m">
					<text>小六壬时课:</text>
					<text>{{list.res.nowclass}}</text>
				</view>
				<view class="m">

					<text>{{list.time}}</text>
				</view>
				<view class="qg">
					<rich-text :nodes="guaxiang"></rich-text>
				</view>

			</view>
		</view>
<view class="" v-else  class="bottom">
			<p>小六壬现在时辰起卦!仅供娱乐，切勿迷信</p>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				list: null,
				guaxiang: ""
			}
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"来算一卦吧",
						imageUrl:'/static/image/gua.png'
						
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '来算一卦吧',
					imageUrl:'/static/image/gua.png'
				
			}
		},
		methods: {
			startQigua(e) {

				throttle(this.getData(), 2000)
			},
			confirm(e) {
				console.log(e);
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})


				this.$api.qigua().then(res => {
					if (res.code == 200) {
						this.guaxiang = '<br>' + res.hourmsg.replaceAll("。", '<br>')
						this.list = res;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'noe'
						})
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.qigua {
		width: 100%;
		text-align: center;

		.start {
			width: 100%;
			text-align: center;

			text {
				width: 120px;
				display: inline-block;
				background-color: #e32616;
				font-size: 30rpx;
				color: #fff;
				padding: 10px;
				border-radius: $uni-border-radius-base;
				line-height: 15px;
				margin-top: 20px;
			}

		}

	}


	@keyframes zhuan {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.bagua {
		width: 256px;
		height: 256px;
		animation: zhuan 10s linear infinite;
		/* 2秒旋转一周，匀速，无限循环 */

	}

	.xaingxi {
		padding: 20px;

		.c {
			margin-top: 10px;

			.t {
				font-size: 30rpx;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				padding: 10px;

				display: flex;

				.f {
					padding: 0 10rpx;
				}

				.shu {
					width: 4px;
					height: 24px;

					background-color: #9d9e97;
				}
			}

			.m {
				font-size: 28rpx;
				margin-top: 20rpx;
			}

			.qg {
				margin-top: 10px;

			}
		}
	}
</style>